Scrapbox Glassmorphism Custum Theme UserCSS

スクラップボックスのグラスモーフィズムテーマをUserCSSで作りましたので公開します。

使い方

このページのstyle.cssをインポートしてください。また、settingsにコンフィグファイルを作成してください。

以下のCSSがコンフィグです。settingsにコピペし、微調整してお使いください。

code:copy_me_into_your_settings_and_change_its_filename_as_style.css

:root {

/* glassmorphism config vars */

/* h and s of hsla color model */

--theme-main-hs: 300 80%;

--body-bg-layer-1: radial-gradient(ellipse at 60% 30%, transparent, var(--black-very-weak) 60%, var(--black-medium));

--body-bg-layer-2: radial-gradient(ellipse at 40% 70%, transparent, var(--white-very-weak) 60%, var(--white-medium), var(--white-very-strong));

--backdrop-blur-weak: blur(1px);

--backdrop-blur-medium: blur(3px);

--backdrop-blur-strong: blur(5px);

--white-very-weak: rgba(255, 255, 255, var(--alpha-very-weak));

--white-weak: rgba(255, 255, 255, var(--alpha-weak));

--white-medium: rgba(255, 255, 255, var(--alpha-medium));

--white-strong: rgba(255, 255, 255, var(--alpha-strong));

--white-very-strong: rgba(255, 255, 255, var(--alpha-very-strong));

--border-radius-short: 3px;

--border-radius-middle: 7px;

--border-radius-long: 12px;

--shadow-close: 1px 1px 5px rgb(0 0 0 / var(--alpha-weak));

--shadow-middle: 2px 4px 5px rgb(0 0 0 / var(--alpha-weak));

--shadow-far: 4px 8px 10px rgb(0 0 0 / var(--alpha-medium));

--light-gradient: linear-gradient(125deg, var(--white-medium), var(--white-very-weak));

--light-dull: 20%;

--light-medium: 35%;

--light-bright: 60%;

--alpha-very-weak: .1;

--alpha-weak: .2;

--alpha-medium: .4;

--alpha-strong: .6;

--alpha-very-strong: .7;

}

以下ソースコード

長くなったのでTOC

code: style.css

:root {

/* official css vars */

--body-bg: hsl(var(--theme-main-hs) var(--light-medium));

--page-bg: var(--white-very-strong);

--line-title-color: var(--white-very-strong);

--tool-bg: var(--white-medium);

--tool-color: var(--white-very-strong);

--tool-text-color: var(--white-very-strong);

--tool-light-color: var(--white-medium);

--navbar-bg: hsl(var(--theme-main-hs) var(--light-medium) / var(--alpha-medium));

--navbar-icon-color: var(--white-very-strong);

--navbar-icon-hovered-color: white;

--navbar-icon-active-color: var(--white-very-strong);

--search-form-bg: var(--white-strong);

--new-button-bg: transparent;

--new-button-active-bg: transparent;

--new-button-hover-bg: transparent;

--new-button-horizontal-color: var(--white-very-strong);

--new-button-vertical-color: var(--white-very-strong);

--card-title-color: var(--line-title-color);

--card-title-bg: none;

--card-title-bg-pinned: none;

--card-bg: var(--white-medium);

--card-active-bg: var(--card-bg);

--card-description-color: var(--page-text-color);

--card-hover-bg: var(--card-bg);

--card-box-shadow: 2px 4px 5px rgb(0 0 0 / 16%), inset 0 0 5px var(--white-weak);

--card-box-hover-shadow: 2px 4px 5px rgb(0 0 0 / 32%), inset 0 0 5px var(--white-weak);

--card-box-shadow-color: var(--body-bg);

--card-description-code-color: var(--page-text-color);

--card-description-link-color: var(--page-text-color);

--code-bg: var(--white-strong);

--telomere-border: var(--white-very-strong);

--telomere-unread: hsl(var(--theme-main-hs) var(--light-dull) / var(--alpha-strong));

--quote-bg-color: var(--white-strong);

--relation-label-bg: transparent;

--relation-label-empty-bg: transparent;

--relation-label-links-bg: transparent;

--relation-label-empty-text: var(--white-medium);

--relation-label-links-text: var(--white-medium);

--relation-label-text: var(--white-medium);

--tool-badge-bg: var(--white-weak);

}

code: style.css

body {

background: var(--body-bg-layer-1, none), var(--body-bg-layer-2, none), var(--body-bg-layer-3, none);

min-height: 100vh;

box-shadow: inset 0 0 60px var(--white-medium);

}

/* navigation */

.navbar {

border-bottom: solid 1px hsl(var(--theme-main-hs) var(--light-bright) / var(--alpha-medium));

box-shadow: inset 0 0 5px var(--white-weak);

backdrop-filter: var(--backdrop-blur-medium) !important;

-webkit-backdrop-filter: var(--backdrop-blur-medium) !important;

}

.status-bar > div {

border-top-left-radius: var(--border-radius-middle) !important;

background: var(--light-gradient);

}

.search-form .form-group input {

box-shadow: inset 0 0 5px var(--white-weak);

}

/* main page */

.page {

border: solid 1px white;

box-shadow: var(--shadow-far), inset 0 0 24px var(--white-medium);

border-radius: var(--border-radius-long);

}

/* related page list */

.related-page-list {

padding: 5%;

margin: -5% 1% 0 5%;

/* 背景にも白が入るので、カードの透過色を強める */

--card-bg: var(--white-weak);

backdrop-filter: var(--backdrop-blur-strong) !important;

-webkit-backdrop-filter: var(--backdrop-blur-strong) !important;

box-shadow: var(--shadow-far), inset 0 0 5px var(--white-medium);

border-radius: var(--border-radius-long);

background-color: var(--white-weak) !important;

border: solid 1px var(--white-medium) !important;

}

code:style.css

/* text */

.line.line-title{

font-size: 3em;

line-height: 1.5em;

font-weight: bold;

letter-spacing: 0.03em;

text-shadow: var(--white-weak) 0 0 25px;

}

.line a:is(.page-link, .link) {

font-weight: bold;

}

.deco-\* {

font-weight: bold;

color: var(--white-strong);

}

.line.line-title .text:not(.that) {

padding: 40px 10px;

}

/* dropdown */

.dropdown-menu {

border: solid 1px var(--white-medium);

color: rgba(0, 0, 0, 0.6) !important;

border-radius: var(--border-radius-long);

background: var(--light-gradient), var(--white-medium);

backdrop-filter: blur(20px) !important;

-webkit-backdrop-filter: blur(20px) !important;

}

.dropdown-menu.global-menu {

background: var(--light-gradient), var(--white-strong);

}

.divider {

background-color: var(--white-very-strong) !important;

}

/* modal */

.modal-backdrop {

display: none;

}

.modal-content {

background-color: var(--white-medium) !important;

color: var(--white-strong) !important;

border: solid 1px var(--white-weak) !important;

border-radius: var(--border-radius-long);

box-shadow: var(--shadow-middle) !important;

backdrop-filter: blur(5px) !important;

-webkit-backdrop-filter: blur(5px) !important;

}

code:style.css

/* buttons */

/* normal buttons */

:not(.xs) > :not(.xs) > :is(.btn, .tool-btn) {

border-radius: var(--border-radius-middle) !important;

margin: 5px;

backdrop-filter: blur(5px) !important;

-webkit-backdrop-filter: blur(5px) !important;

background: linear-gradient(125deg, var(--white-medium), var(--white-very-weak));

border: solid 1px var(--white-weak);

box-shadow: inset 0 0 5px var(--white-weak);

}

:not(.xs) > :not(.xs) > :is(.btn, .tool-btn):hover {

/*background-color: var(--white-medium) !important;*/

background: linear-gradient(125deg, var(--white-medium), var(--white-very-weak));

box-shadow: var(--shadow-middle) !important;

}

/* dropdown buttons */

.dropdown-menu>li>a:active,

box-shadow: var(--shadow-middle) !important;

}

/* new button */

.new-button {

/* background: transparent !important; */

border: solid 2px var(--white-very-strong);

box-sizing: content-box;

}

/*

:not(.hidden-xs) > .layout-page > .new-button {

position: relative;

left: calc(40% - 36px);

bottom: -15vh;

width: calc(36px * 2);

height: calc(36px * 2);

line-height: calc(36px * 2);

border-radius: calc(20px * 2);

border: solid calc(2px * 2) var(--white-strong);

z-index: 999;

}

:not(.hidden-xs) > .layout-page > .new-button * {

border-radius: calc(2px * 2);

}

:not(.hidden-xs) > .layout-page > .new-button .horizontal-line {

top: calc(16px * 2);

left: calc(6px * 2);

width: calc(24px * 2) !important;

height: calc(4px * 2) !important;

}

:not(.hidden-xs) > .layout-page > .new-button .vertical-line {

width: calc(4px * 2) !important;

height: calc(24px * 2) !important;

top: calc(6px * 2);

left: calc(16px * 2);

}

*/

/* code-block */

.code-block {

border-left: outset 4px rgba(255,255,255,1);

border-right: inset 4px rgba(255,255,255,1);

}

.section-title .code-block{

/*border-top: solid 1px rgba(255,255,255,0.5);*/

}

code:style.css

/* page list */

.page-list-item.grid-style-item a {

backdrop-filter: blur(5px);

-webkit-backdrop-filter: blur(5px);

border: solid 1px var(--white-medium);

border-radius: var(--border-radius-middle) !important;

background: var(--light-gradient), var(--card-bg) !important;

}

.relation-label .arrow, .grid li.page-list-item a .hover {

display: none !important;

}

.relation-label {

width: auto !important;

height: auto !important;

display: inline !important;

max-width: 60%;

}

.relation-label a {

border: none !important;

font-size: 70px !important;

}

.grid li.relation-label a .icon-lg {

display: none !important;

}

.relation-label a .title {

display: inline !important;

max-height: none !important;

font-weight: bold;

text-shadow: var(--white-weak) 0 0 25px;

}

.page-sort-menu {

margin-bottom: 4vh;

}

code:style.css

/* telomere */

.telomere-border .description{

background-color: var(--white-strong) !important;

/*backdrop-filter: blur(1px);

-webkit-backdrop-filter: blur(1px);*/

border: solid 1px var(--white-strong);

border-radius: var(--border-radius-short) !important;

font-weight: bold;

color: var(--page-text-color) !important;

letter-spacing: 0.1em;

box-shadow: 0px 0px 3px 0px var(--white-weak);

line-height: 20px !important;

height: 20px !important;

margin: 2px 10px !important;

font-size: 10px !important;

}